<template>
  <!-- 上架作品 -->
  <div class="customer_box">
    <div class="order_box">
      <div style="height: 20px"></div>
      <div style="width: 60%; height: 30%; background-color: #76c5de8c">
        <h1 style="color: #db5e5e">CONFIRM / ORDER</h1>
        <p style="font-size: 30px">确认下单</p>
      </div>
      <div style="height: 20px"></div>
      <div class="list_box">
        <!-- 购物车主体 -->
        <div class="main" v-if="shoppingcartList.length > 0">
          <div class="table">
            <!-- 头部 -->
            <div class="thead">
              <div class="tr">
                <div class="th">选中</div>
                <div class="th th-pic">图片</div>
                <div class="th">名称</div>
                <div class="th">作者</div>
                <div class="th">单价</div>
                <div class="th">操作</div>
              </div>
            </div>
            <!-- 身体 -->
            <div class="tbody">
              <div
                v-for="item in shoppingcartList"
                :key="item.id"
                class="tr"
                :class="{ active: item.isChecked }"
              >
                <!-- 选中 -->
                <div class="td">
                  <input type="checkbox" v-model="item.isChecked" />
                </div>
                <!-- 图片 -->
                <div class="td">
                  <img
                    :src="'http://127.0.0.1:8000' + item.artwork.image"
                    alt=""
                  />
                </div>
                <!-- 名称 -->
                <div class="td">{{ item.artwork.title }}</div>
                <!-- 作者 -->
                <div class="td">{{ item.artwork.artist.real_name }}</div>
                <!-- 单价 -->
                <div class="td">{{ item.artwork.price }}</div>

                <div class="td">
                  <el-button @click="del(item.id)" type="danger" size="small"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 底部 -->
          <div class="bottom">
            <!-- 全选 -->
            <label class="check-all">
              <input type="checkbox" v-model="isAll" />
              全选
            </label>
            <div class="right-box">
              <!-- 所有商品总价 -->
              <span class="price-box"
                >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">
                  {{ totalPrice }}</span
                ></span
              >
              <!-- 结算按钮 -->
              <button class="pay" @click="settlement()">
                结算( {{ totalCount }} )
              </button>
            </div>
          </div>
        </div>
        <!-- 空车 -->
        <div class="empty" v-else>🛒空空如也</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getshoppingcart, delorder, settlement } from "@/api/order";
export default {
  data() {
    return {
      // 购物车中的物品列表
      shoppingcartList: [], 
      // 选中的物品列表
      selectedItems: {
        selected_order_ids:[]
      }, 
    };
  },
  computed: {
    // 总价
    totalPrice() {
      return this.getTotalPrice();
    },
    // 总数量
    totalCount() {
      return this.getTotalCount();
    },
    // 是否全选
    isAll: {
      get() {
        return this.shoppingcartList.every((item) => item.isChecked);
      },
      set(val) {
        this.shoppingcartList.forEach((item) => (item.isChecked = val));
      },
    },
  },
  created() {
    this.getShoppingcartList();
  },
  methods: {
    // 获取购物车数据
    getShoppingcartList() {
      getshoppingcart().then((res) => {
        console.log(res);
        this.shoppingcartList = res.results;
      });
    },
    // 计算总价
    getTotalPrice() {
      // 使用 reduce 方法来遍历购物车列表，并累加选中商品的价格
      return this.shoppingcartList.reduce((total, item) => {
        if (item.isChecked) {
          // 将商品价格转换为数字类型，然后累加
          return total + parseFloat(item.artwork.price);
        } else {
          return total;
        }
      }, 0); // 初始值为 0
    },
    // 计算总数量
    getTotalCount() {
      // 使用 reduce 方法来遍历购物车列表，并累加选中商品的数量
      return this.shoppingcartList.reduce((count, item) => {
        if (item.isChecked) {
          // 累加选中商品的数量
          return count + 1;
        } else {
          return count;
        }
      }, 0); // 初始值为 0
    },
    // 删除
    del(id) {
      delorder(id).then((res) => {
        console.log(id);
        console.log(res);
        this.getShoppingcartList();
      });
    },
    // 结算,结算我选中的商品
    settlement() {

      // 提交选中的订单ID列表给后端进行结算处理
        this.selectedItems.selected_order_ids = this.shoppingcartList.filter(item => item.isChecked).map(item => item.id)
      console.log(this.selectedItems.selected_order_ids);
      settlement(this.selectedItems)
        .then((res) => {
          this.$message({
            message: "结算成功",
            type: "success",
          });
          // 跳转到订单详情页面
          this.$router.push("myOrders");
        })
        .catch((error) => {
          // 处理结算失败的情况，例如显示错误信息等
          console.error("结算失败", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/index.css";
@import "../../assets/css/inputnumber.css";
.order_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .list_box {
    width: 80%;
    height: 20%;
    border-radius: 10px;
    display: flex;
  }
}

// @media (max-width: 1400px) {
//   .dialog_box {
//     width: 80% !important;
//   }
// }
</style>
